<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-button type="text" icon="el-icon-circle-plus-outline">
                    添加
                </el-button>
                <div style="float: right">
                    <i @click="onPreview" class="el-icon-d-arrow-left btn-date"></i>
                    <el-date-picker
                            v-model="selected"
                            type="month"
                            placeholder="选择月"
                            :editable="false"
                            :clearable="false"
                            @change="onDateChange"
                    >
                    </el-date-picker>
                    <i @click="onNext" class="el-icon-d-arrow-right btn-date"></i>
                </div>
            </admin-card>
        </admin-section>
        <admin-section>
            <admin-card>
                <admin-advert-calendar :date="calendar"></admin-advert-calendar>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {Vue, Component, Watch} from 'vue-property-decorator'
    import {AdminView, AdminCard, AdminLabel, AdminSection} from '@/views/layout'
    import AdminAdvertCalendar from './AdminAdvertCalendar'
    import moment from 'moment'

    @Component({
        name: 'AdminAdvertCalendarView',
        components: {
            AdminView,
            AdminCard,
            AdminLabel,
            AdminSection,
            AdminAdvertCalendar
        }
    })
    export default class AdminAdvertCalendarView extends Vue {

        selected: Date = new Date();
        calendar: string = '';

        onDateChange(value) {
            this.calendar = this.getDate(value)
        }

        getDate(value: any) {
            return moment(value).format("YYYY-MM")
        }

        onPreview() {
            this.onAddDate(-1)
        }

        onNext() {
            this.onAddDate(1)
        }

        onAddDate(value: any) {
            this.selected = moment(this.selected).add(value, 'months').toDate();
            this.calendar = this.getDate(this.selected)
        }

        loadView() {
            if(this.$route.query['date']) {
                this.selected = moment(this.$route.query['date']).toDate();
                this.calendar = this.getDate(this.selected);
            }else{
                this.calendar = this.getDate(this.selected);
            }
        }

        @Watch('$route')
        onRouterDateChange(value) {
            this.loadView()
        }

        mounted() {
            this.loadView()
        }
    }
</script>

<style lang="scss" scoped>

    .btn-date {
        color: black;

        &:hover {
            color: #409EFF;
            cursor: pointer;
        }
    }
</style>